<template>
  <view :catchtouchmove="true">
    <view class="coupon-list-window" :class="coupon.coupon === true ? 'on' : ''" :catchtouchmove="true">
      <view class="title">
        优惠券
        <!-- <text class="iconfont icon-guanbi" @click="close"></text> -->
      </view>
      <scroll-view scroll-y style="height: 550rpx; padding-bottom: 50rpx" :catchtouchmove="true">
        <view class="coupon-list" v-if="coupon.list.length > 0">
          <view class="item acea-row row-center-wrapper" v-for="(item, couponpopIndex) in coupon.list"
            :key="couponpopIndex" @click="getCouponUser(couponpopIndex, item)">

            <view class="money" v-if="item.couponType === 1">
              <text>
                ￥
                <text class="num">{{ item.couponAmount }}</text>
              </text>
              <text class="tips" v-if="item.minOrderAmount">满{{ item.minOrderAmount }}可用</text>
              <text class="tips" v-else>无门槛</text>
            </view>
            <view class="money" v-if="item.couponType === 2">
              <text>
                <text class="num">{{ item.couponAmount }}</text>
                折
              </text>
              <text class="tips" v-if="item.minOrderAmount">满{{ item.minOrderAmount }}可用</text>
              <text class="tips" v-else>无门槛</text>
            </view>
            <view class="money" v-if="item.couponType === 3">
              <text>
                <text class="num">兑换券</text>
              </text>
            </view>
            <view class="text">
              <view class="condition line1">{{ item.name }}</view>
              <view class="data acea-row row-between-wrapper">
                <view v-if="item.validDateType === 3">永久有效</view>
                <view v-if="item.validDateType === 2">领取后{{ item.validDays }}天有效</view>
                <view v-if="item.validDateType === 1">{{ item.useStartTime | filterDay }}-{{ item.useEndTime | filterDay
                  }}
                </view>
                <view class="bnt acea-row row-center-wrapper" :class="!item.isUse ? 'bg-color-red' : 'gray'">{{
                  !item.isUse ? '立即领取' : '已领取' }}</view>
              </view>
            </view>
          </view>
        </view>
        <!--无优惠券-->
        <view class="pictrue" v-else>
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
        </view>
      </scroll-view>
    </view>
    <view class="mask" :hidden="coupon.coupon === false" :catchtouchmove="true" @touchmove.prevent @click="close">
    </view>
  </view>
</template>
<script>
import dayjs from 'dayjs';
import { getCouponReceiveOne } from '@/api/inquiryModule/inquiryModule.js'
export default {
  name: 'CouponPop',
  props: {
    coupon: {
      type: Object,
      default: () => { },
    },
  },
  filters: {
    filterDay(time) {
      return dayjs(time).format('YYYY/MM/DD')
    }
  },
  methods: {
    close: function () {
      this.$emit('changeFun', { action: 'changecoupon', value: false }) //$emit():注册事件；
    },
    getCouponUser: function (index, item) {
      let that = this,
        list = that.coupon.list
      if (list[index].is_use === true) return
      getCouponReceiveOne({
        promotionId: item.promotionId,
        couponId: item.id
      }).then(function () {
        uni.showToast({
          title: '已领取',
          icon: 'none',
          duration: 2000,
        })
        that.$set(list[index], 'is_use', true)
        that.$emit('changefun', { action: 'currentcoupon', value: index })
        that.$emit('changeFun', { action: 'changecoupon', value: false })
      })
    },
  },
}
</script>

<style>
.bg-color-red {
  background-color: #ff6010 !important;
}

.tips {
  font-size: 24rpx;
  color: #fff;
  font-weight: 400;
}
</style>
